<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.6.2/css/bootstrap.min.css"/>
    <script src="jquery/jquery-3.6.0.min.js"></script>
    <script src="jquery/jquery.cookie.js"></script>
    <script src="bootstrap-4.6.2/js/bootstrap.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        ul {
            margin: 0;
        }

        body {
            background-image: url("/images/school.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;

        }

        .login_po {
            height: 100%;
        }

        .login_form {
            width: 400px;
            height: 300px;
            color: yellow;
            margin: 0 auto;
        }

        form {
            padding-top: 250px;
        }

        .title_form {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="login_po w">
        <div class="login_form">
            <form>
                <div class="title_form">
                    <h2>用户登陆</h2>
                </div>
                <div class="form-group">
                    <label for="username">账号:</label>
                    <input type="text" class="form-control"  placeholder="请输入学号或者管理员账号" id="username">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
                <div class="login">
                    <input  type="radio" class="login_role" value="stu" name="login" checked id="stu">
                    <label  class="form-check-label" for="stu">学生登录</label>
                    <input  type="radio" class="login_role" value="admin" name="login" id="admin">
                    <label class="form-check-label" for="admin">管理员登陆</label>
                </div>
                <div style="margin-top: 5px">
                    <input  style="float: left" type="button" onclick="roleLogin()" class="btn btn-primary" value="登陆">
                    <input style="float: right" type="button" onclick="register()" class="btn btn-primary" value="注册">
                </div>
            </form>
        </div>
    </div>

</div>
<script type="text/javascript">
    function roleLogin() {
        let username = $("#username").val();
        let password = $("#password").val();
        let admin = $('input[name="login"]:checked').val();
        $.ajax({
            url: "http://localhost:8080/login",
            type: "POST",
            data:{
                username:username,
                password:password,
                admin:admin
            },
            dataType: "json",
            success: function (json) {
                 if (json.code==201){
                     alert(json.msg);
                     $.cookie("sid",json.data.sId);
                     location.href="pages/program.jsp";
                 }
                 if (json.code==202) {
                     alert(json.msg);
                     location.href="pages/addEvent.jsp";
                 }
            }
        });
    }
    function register() {
       location.href="/pages/register.jsp";
    }
</script>
</body>
</html>